<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/ftl/css/laypage.css">
    <link rel="stylesheet" href="/ftl/css/bootstrap.min.css">
    <script src="/ftl/js/vue/vue.min.js"></script>
    <script src="/ftl/js/jquery/jquery.min.js"></script>
    <script src="/ftl/js/layer/layer.js"></script>
    <script src="/ftl/js/laypage/laypage.js"></script>
</head>
<body>
<div id="app" class="container">
    <form action="" class="form-inline" role="form">
        查询条件：
        <div class="form-group">
            <label class="sr-only" for="">用户名称</label>
            <input type="text" class="form-control" id="name" placeholder="用户名称">
        </div>
        <button type="button" id="findUser" class="btn btn-success">查询用户</button>
        <button type="button" id="addUser" class="btn btn-danger">新增用户</button>
    </form>

    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr class="success">
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>部门</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr class="active" v-for="(item,index) in result">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.dept.deptname}}</td>
                    <td><a href="javascript:void(0)" @click="edit(item.id)">编辑</a> <a href="javascript:void(0)" @click="deleteUser(item.id)">删除</a></td>
                </tr>
            </tbody>
            <tr>
                <td colspan="4">
                    <div id="pagenav"></div>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            result:[]
        },
        methods:{
            edit(id){
                layer.open({
                    type:2,
                    title:'添加用户',
                    fix:false,
                    maxmin:true,
                    shadeClose:true,
                    area:['1000px','600px'],
                    content: 'editUser?id='+id,
                    end:function (){
                        getUserList()
                    }
                })
            },
            deleteUser(id){
                layer.confirm("你确定要删除吗？", {
                    btn:['是','否']
                }, function (){
                    $.ajax({
                        type:'post',
                        url:"/deleteUser",
                        data:{
                            id:id
                        },
                        success:function (res){
                            getUserList()
                            layer.msg('已经成功删除记录' + id, {icon: 5});
                        }
                    })
                }, function (){

                })
            }
        }
    })
    function getUserList(curr){
        $.ajax({
            type:"post",
            url:"/getUsersByPage",
            data:{
                name:$("#name").val(),
                currentPage:curr || 1,
                pageSize: 5
            },
            success:function (res){
                app.result = res.users
                laypage({
                    cont:'pagenav',
                    pages:res.pages,
                    skin:'#DB7093',
                    first:'首页',
                    last:'最后一页',
                    curr:curr || 1,
                    jump:function (obj,first){
                        if (!first)
                            getUserList(obj.curr)
                    }
                })
            }
        })
    }
    $("#findUser").click(function (){
        getUserList()
    })

    $("#addUser").click(function (){
        layer.open({
            type:2,
            title:'添加用户',
            fix:false,
            maxmin:true,
            shadeClose:true,
            area:['1000px','600px'],
            content: '/add.html',
            end:function (){
                getUserList()
            }
        })
    })

    getUserList()
</script>
</html>
